﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/v2/console/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<title>文章列表2</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="${path}/party/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${path}/party/css/pagination.css">
  <link rel="stylesheet" type="text/css" href="${path}/party/css/main.css">
</head>
<body>
<div id="VueId" v-cloak>
  <!-- 内容部分 -->
  <div class="dj-body">
    <div class="center-div">

      <div class="courseResearch-div">
        <!-- <div class="right-img"> <img :src="recomd.picLink" /> </div> -->
        <img :src="recomd.picLink + '?imageMogr2/thumbnail/1150x/format/jpg/q/95!/strip'" />
      </div>

      <ul class="recommend-list">
       <template v-for="item in recomdArticle" v-cloak>
	        <li @click="artcleDetail(item.articleId)">
	          <div class="reco-img-div"><img :src="item.picLink" /> </div>
	          <a href="javascript:;" class="tit-a">{{item.title}}</a>
	          <p class="info-p">{{item.subtitle}}</p>
	        </li>
        </template>
      </ul>

      <div class="edit-div">
        <!-- 此处是编辑器的内容 -->
        <p v-html="recomd.content">{{recomd.content}}
        </p>
      </div>

      <div class="news-articles">
        <div class="news-arti-left">
          <h4>新闻与文章</h4>
          <ul>
            <li v-for="item in artcles" @click="artcleDetail(item.articleId)" v-cloak>
              <img :src="item.picLink">
              <div class="news-info-div">
                <h5>{{item.title}}</h5>
            	<p>{{item.subtitle}}</p>
                <span>{{item.content | contentFilter}}</span>
              </div>
            </li>
          </ul>

          <!-- 分页 -->
          <div class="pagination">
           <!--  <label class="pageination-num">20页第1页</label> -->
            <div id="pagination" class="page"></div>
          </div>
          <!-- end 分页 -->
        </div>
        <div class="news-arti-right">
          <div class="det-right-bottom">
            <h4 class="news-title">消息</h4>
            <div class="contactUs-div">
              <label>联系我们的投稿</label>
              <p>如有查询，请致电010-12345678</p>
              <a href="javascript:;" class="btn btn-sm">给我们发电子邮件</a>
            </div>
            <div class="activity-div">
              <h4>即将举行的活动</h4>
              <label>无事件</label>
              <a href="javascript:;" class="btn btn-sm">查看全部</a>
            </div>
          </div>
        </div>
      </div>
 
    </div>
  </div>
</div>
<!-- javascritp flie -->
<script type="text/javascript" src="${path}/party/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${path}/party/js/jquery.pagination.js"></script>
<script type="text/javascript" src="${path}/party/js/rem(750).js"></script>
<script type="text/javascript" src="${path}/party/js/vue2.js"></script>
<script type="text/javascript" src="${path}/party/plugin/nav-moveline/js/jquery.easing.js"></script>
<script type="text/javascript" src="${path}/party/plugin/nav-moveline/js/moveline.js"></script>
<script type="text/javascript" src="${path}/party/plugin/nav-moveline/js/toast.js"></script>
<script type="text/javascript">
    var listData = {
      twoNavActive: 0,
      threeNav:[],
      threeNavActive: 0,
      nav: [
        { id:1, navName:'德法治国',
         twoNav:[
           { id:1, twoNavName:'德法治国1'},
           { id:2, twoNavName:'德法治国2'},
           { id:3, twoNavName:'德法治国3'}
         ] 
        },
        { id:2, navName:'课程研究',
         twoNav:[
           { id:1, twoNavName:'主题论坛'},
           { id:2, twoNavName:'互动社区'},
           { id:3, twoNavName:'课程招贤'}
         ] 
        },
        { id:3, navName:'专家观点',
         twoNav:[
           { id:1, twoNavName:'专家观点1'},
           { id:2, twoNavName:'专家观点2'},
           { id:3, twoNavName:'专家观点3'}
         ] 
        },
        { id:4, navName:'示范基地',
         twoNav:[
           { id:1, twoNavName:'示范基地1'},
           { id:2, twoNavName:'示范基地2'},
           { id:3, twoNavName:'示范基地3'}
         ] 
        }
      ]
    };

    var vm = new Vue({
        el: '#VueId',
        data: {
        	listData:listData,
        	recomd:{},
        	artcles:[],
        	recomdArticle:[],
        	menuId:''
        },
        created:function(){
        	this.menuId = ${menuId};
        	this.getRecomdContent();
        	this.getRecomdArticleList();
        	this.queryArticleList(1);
        	
        },
        filters: {
        	contentFilter: function (value) {
        		value = value.replace(/<[^>]+>/g, "");
        		value = value.replace(/&nbsp;/ig, "");
        		return value;
            }
        },
        methods: {
        	artcleDetail:function(artcleId){
        		 //window.open("${pageContext.request.contextPath}/web/artcle/goArticleDetail.html?articleId="+artcleId); 
        		 var addr = "${pageContext.request.contextPath}/web/artcle/goArticleDetail.html?articleId="+artcleId; 
              	 var frame = parent.window.document.getElementById("ifr"); 
              	 frame.setAttribute("src",addr);
             },
          getRecomdContent:function(){
        	  let _that = this;
        	  //获取推荐内容
        	  $.ajax({
  				type : "post",
  				url : "${path}/web/getRecomdContent.html",
  				dataType : "json",
  				data:{
  					menuId:_that.menuId
  				},
  				async : false,
  				success : function(data) {
  					if(data.ajax_status == "ajax_status_success"){
  						_that.recomd = data.map;
  					}
  					
  				},
  				error : function(XMLHttpRequest, textStatus, errorThrown){
  		          alert("出错了！");
  		       }
  			});
        	  
          },
          getRecomdArticleList:function(){
        	  let _that = this;
        	  //获取推荐内容
        	  $.ajax({
  				type : "post",
  				url : "${path}/web/getRecomdArticleList.html",
  				dataType : "json",
  				data:{
  					menuId:_that.menuId
  				},
  				async : false,
  				success : function(data) {
  					if(data.ajax_status == "ajax_status_success"){
  						_that.recomdArticle = data.recomdArticleList;
  					}
  					
  				},
  				error : function(XMLHttpRequest, textStatus, errorThrown){
  		          alert("出错了！");
  		       }
  			});
          },
          queryArticleList:function(start){
        	  let _that = this;
        	  $.ajax({
    				type : "post",
    				url : "${path}/web/queryArticleList.html",
    				dataType : "json",
    				data:{
    					menuId:_that.menuId,
    					start:start
    				},
    				async : false,
    				success : function(data) {
    					if(data.ajax_status == "ajax_status_success"){
    						_that.artcles = data.page.datasource;
    						_that.pageCallback(data.page.absolutePage);
    					}
    					
    				},
    				error : function(XMLHttpRequest, textStatus, errorThrown){
    		          alert("出错了！");
    		       }
    			});
            },
            pageCallback:function(pageCount){
            	if(pageCount == 0){
     				pageCount = 1;
     			}
            	let _that = this;
                _that.$nextTick(function(){
                	 //分页初始化
                    $('#pagination').pagination({
                      callback:_that.pageData,
                      prevContent: "上一页",
                      nextContent: "下一页",
                      prevCls:'prev',
                      nextCls:'next',
                      totalData:pageCount,
                      showData:1,
                      num_edge_entries: 3,       //当分页非常多时，两侧首尾分页条目数为3条，不显示的部分用省略号代替
 	                  num_display_entries: 9    //当分页非常多时，连续分页最多显示9条，不显示的部分用省略号代替
                    });
                    //分页初始化
                  });
     		},
     		pageData:function(pagenation,jq){
     			
     			let _that = this;
          	    $.ajax({
      				type : "post",
      				url : "${path}/web/queryArticleList.html",
      				dataType : "json",
      				data:{
      					menuId:_that.menuId,
      					start:pagenation.getCurrent()
      				},
      				async : false,
      				success : function(data) {
      					if(data.ajax_status == "ajax_status_success"){
      						_that.artcles = data.page.datasource;
      					}
      					
      				},
      				error : function(XMLHttpRequest, textStatus, errorThrown){
      		          alert("出错了！");
      		       }
      			});
        	},
          tabTwo(index,data) {
            this.twoNavActive = index;//tab切换
            console.log(JSON.stringify(data.twoNav));
            this.threeNav = data.twoNav;
            console.log(JSON.stringify(this.threeNav));
          },
          tabThree(index) {
            this.threeNavActive = index;
          }
        }
    });

    vm.$nextTick(function(){
      
      $('.nav1-ul').moveline({customTop:true,top:0});//一级导航动画初始化 
      vm.threeNav = vm.nav[0].twoNav;//给三级导航 添加默认的数据

      //分页初始化
      $('#pagination').pagination({
        prevContent: "上一页",
        nextContent: "下一页",
        prevCls:'prev',
        nextCls:'next',
        totalData:100,
        showData:5,
        coping:true
      });
    });
</script>
</body>
</html>
